<template>
  <div class="home">
    <header class="header">
      <h1>数学训练营</h1>
    </header>
    
    <main class="main">
      <div class="module-cards">
        <div class="card" @click="selectModule('ARITHMETIC_QUIZ')">
          <h2>算术摸底</h2>
          <p>随机展示一些算术题，并给出若干个选项，用户点击选项后，马上展示下一个算术题（不立即展示对错）。</p>
          <button class="enter-btn">进入训练</button>
        </div>
        
        <div class="card" @click="selectModule('ARITHMETIC_FLASHCARD')">
          <h2>算术闪卡</h2>
          <p>在限定时间内作答的算术题训练，超时未答则自动进入下一题。</p>
          <button class="enter-btn">进入训练</button>
        </div>
      </div>
    </main>
  </div>
</template>

<script setup>
import { useRouter } from 'vue-router'

const router = useRouter()

const selectModule = (moduleType) => {
  router.push(`/config/${moduleType}`)
}
</script>

<style scoped>
.home {
  min-height: 100vh;
  background-color: #f0f8ff;
}

.header {
  background-color: #4a90e2;
  color: white;
  padding: 1rem;
  text-align: center;
}

.header h1 {
  font-size: 2rem;
  margin: 0;
}

.main {
  padding: 2rem;
}

.module-cards {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  max-width: 800px;
  margin: 0 auto;
}

.card {
  background-color: white;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  padding: 1.5rem;
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
}

.card:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}

.card h2 {
  color: #4a90e2;
  margin-bottom: 1rem;
}

.card p {
  color: #666;
  margin-bottom: 1.5rem;
  line-height: 1.5;
}

.enter-btn {
  background-color: #4a90e2;
  color: white;
  border: none;
  border-radius: 5px;
  padding: 0.75rem 1.5rem;
  font-size: 1rem;
  cursor: pointer;
  transition: background-color 0.2s;
}

.enter-btn:hover {
  background-color: #357ae8;
}
</style>